<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Asciidoctor 1.5.6.1">
    <title>poetry 后台管理</title>
    <link rel="icon" type="image/ico" href="/images/logo.png"/>
    <link rel="stylesheet" href="/css/editormd.min.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/layui/css/common.css"/>
    <style>
        .header-title {
            min-width: 400px;
            max-height: 51px;
            display: flex;
        !important;
        }

        .header-ret {
            min-width: 80px;
        !important;
        }

        .header-bo {
            min-width: 200px;
            line-height: 53px;
        !important;
        }

        .header-bo input {
            display: inline-block;
            height: 39px;
        !important;
        }

        .header-fot {
            min-width: 200px;
            margin-left: 10px;
        !important;
        }
    </style>
</head>
<body>
<div class="bly-body">
    <div class="bly-panel-title header-title">
        <div class="pull-left header-ret">
            <a href="/page/list"><i class="layui-icon layui-icon-left"></i>文章管理</a>
        </div>
        <div class="pull-left layui-col-xs8 header-bo">
            <input type="hidden" id="article" th:value="${articleId}">
            <input type="text" class="layui-input" placeholder="输入文章标题" id="titleName">
        </div>
        <div class="pull-left header-fot">
            <input type="button" class="layui-btn layui-btn-primary" data-method="saveDraft" value="保存草稿">
            <input type="button" class="layui-btn layui-btn-danger" data-method="saveArticle" value="提交文章">
        </div>
    </div>
    <div class="editormd" id="article-editor">
        <textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
        <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
        <!--<textarea class="editormd-html-textarea" name="text"></textarea>-->
    </div>
</div>
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/editormd.js"></script>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/uploadImg.js" type="text/javascript"></script>


<script type="text/javascript">
    layui.config({
        base: '/layui/lay/modules/'
    }).use(['element', 'table', 'laydate', 'form', 'tag'], function () {
        var element = layui.element,
            table = layui.table,
            form = layui.form,
            tag = layui.tag,
            laydate = layui.laydate;
        tag.set({
            tagText: '<i class="layui-icon layui-icon-add-1"></i> 添加标签'
        });
        var articleEditor, formdata;
        var articleId = $('#article').val();

        function initArticle(md) {
            articleEditor = editormd("article-editor", {
                placeholder: '本编辑器支持Markdown编辑，左边编写，右边预览',  //默认显示的文字，这里就不解释了
                width: "98%",
                height: 780,
                syncScrolling: "single",
                path: "/lib/",   //lib目录
                editorTheme: "3024-day",//编辑主题
                saveHTMLToTextarea: true,
                searchReplace: true,
                htmlDecode: "style,script,iframe|on*",
                emoji: true,
                taskList: true,
                tocm: true,         // Using [TOCM]
                tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart: true,             // 开启流程图支持，默认关闭
                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                imageUpload: true,     //开启图片上传
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "/upload/imgUpLoad", //上传的路径，就是mvc的controller路径
                markdown: md,
                toolbarIcons: function () {  //自定义工具栏，后面有详细介绍
                    return editormd.toolbarModes['full']; // full, simple, mini
                },
                onload: function () {
                    initPasteDragImg(this); //必须
                }
            });
        }


        if (articleId) {
            $.ajax({
                url: '/article/getById',
                type: 'post',
                dataType: 'json',
                data: {articleId: articleId},
                success: function (res) {
                    if (res.status !== 200) {
                        layer.alert(res.msg, {icon: 5});
                        return;
                    }
                    var data = res.data;
                    $("#titleName").val(data.title);
                    initArticle(data.original);
                    if (data.tags) {
                        var tags = data.tags.split(',');
                        $.each(tags, function (i, item) {
                            tag.add('tag', {text: item});
                        })
                    }
                    if (data.imgUrl) {
                        $('.site-doc img').each(function (i, item) {
                            if ($(item).attr('src') == data.imgUrl) {
                                $(item).parent('li').addClass('img-checked');
                            }
                        })
                    }
                    formdata = data;
                }
            });
        } else {
            $.ajax({
                url: '/fonts/demo.md',
                ContentType: 'application/octet-stream',
                success: function (md) {
                    initArticle(md);
                }
            });
        }

        var active = {
            saveArticle: function () {
                var mark = articleEditor.getMarkdown();
                var title = $("#titleName").val();
                if (!title) {
                    layer.alert("请输入文章标题", {icon: 7});
                    return;
                }
                if (!mark) {
                    layer.alert("请编写文章内容", {icon: 7});
                    return;
                }

                $('#formDom')[0].reset();
                layer.open({
                    type: 1
                    , title: "发布文章"
                    , area: '650px'
                    , shade: 0.2
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btn: ['提交', '取消']
                    , btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: $("#formDom") /** 注意：DOM一定要放在body之外的地方，否则你会崩溃！！！！！**/
                    , success: function () {
                        form.val('example', formdata);
                    }
                    , yes: function () {
                        form.verify();
                        var html = $('.editormd-html-textarea').text();
                        var title = $("#titleName").val();
                        let data = form.val('example');
                        data.imgUrl = $('.img-checked img').attr("src");
                        data.content = html;
                        data.original = mark;
                        data.title = title;
                        data.tags = tag.data('tag').join(",");
                        if (articleId) {
                            data.id = articleId;
                        }
                        if(!data.describe){
                            layer.alert("请输入文章描述！", {icon: 7});
                            return;
                        }
                        if (!data.imgUrl) {
                            layer.alert("请选择封面！", {icon: 7});
                            return;
                        }
                        $.ajax({
                            url: '/article/save',
                            type: 'post',
                            dataType: 'json',
                            data: data,
                            success: function (result) {
                                if (result.status !== 200) {
                                    layer.alert(result.msg, {icon: 5});
                                    return;
                                }
                                layer.closeAll();
                                reload();
                                layer.alert("保存成功", {
                                    icon: 6,
                                    time: 0,
                                    yes: function () {
                                        location.href = "/page/list"
                                    }

                                });
                            }
                        });
                    }
                });

            },
            saveDraft: function () {
                var mark = articleEditor.getMarkdown();
                var html = articleEditor.getHTML();
                var title = $("#titleName").val();
            }
        };

        function reload(param) {
            let where = $.extend({}, param || {});
            let page = {
                page: {
                    curr: 1 //重新从第 1 页开始
                }, where: where
            };
            //执行重载
            table.reload('dataTable', page, 'data');
        }

        $('.layui-btn').on('click', function () {
            var method = $(this).data('method');
            active[method] ? active[method].call(this) : '';
        });

        $('.site-doc li').click(function () {
            $('.site-doc li').removeClass('img-checked');
            $(this).addClass('img-checked');
        });
    });
</script>
</body>

<form class="layui-form" action="" lay-filter="example" id="formDom" style="display: none;margin-top: 15px;">
    <input type="text" name="id" style="display: none" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">文章描述</label>
        <div class="layui-input-block">
            <textarea name="describe" placeholder="描述只做简短介绍，尽量简洁明了。
注意：描述不会在文章详情里面出现。" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章类型</label>
        <div class="layui-input-block" style="width: 150px;">
            <select name="articleType" lay-filter="aihao">
                <option value="原创">原创</option>
                <option value="转载">转载</option>
                <option value="翻译">翻译</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章标签</label>
        <div class="layui-input-block tag" lay-filter="tag" lay-allowclose="true" lay-newTag="true">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择封面</label>
        <div class="layui-input-block">
            <ul class="site-doc" style="height: 293px; overflow: auto;">
                <li><img src="/img/1.jpeg"></li>
                <li><img src="/img/2.jpeg"></li>
                <li><img src="/img/3.jpeg"></li>
                <li><img src="/img/4.jpeg"></li>
                <li><img src="/img/5.jpeg"></li>
                <li><img src="/img/6.jpeg"></li>
                <li><img src="/img/7.jpeg"></li>
                <li><img src="/img/8.jpeg"></li>
                <li><img src="/img/9.jpeg"></li>
                <li><img src="/img/10.jpeg"></li>
            </ul>
        </div>
    </div>
</form>

</html>